<template>
  <div>
    <el-container>
      <el-header style="display: flex; justify-content: space-between; align-items: center; padding: 10px; border-bottom: 1px solid #e4e7ed;">
        <span>
          <el-button type="primary" icon="el-icon-edit" size="small"></el-button>
          &nbsp&nbsp
          <span class="title">任务管理</span>
        </span>
        <div>
          <el-input placeholder="请输入关键字搜索" v-model="searchKey" style="width: 250px; margin-right: 10px;"></el-input>
          <el-button type="primary" icon="el-icon-search">高级搜索</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="addTask" >新增</el-button>
          <el-button type="info" icon="el-icon-edit">编辑</el-button>
          <el-button type="success" icon="el-icon-upload">提交</el-button>
          <el-button type="success" icon="el-icon-check">处理</el-button>
          <el-button type="danger" icon="el-icon-delete">删除</el-button>
        </div>
      </el-header>
      <el-main>
        <el-table :data="taskList" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="40"></el-table-column>
          <el-table-column fixed prop="index" label="序号" width="40"></el-table-column>
          <el-table-column prop="taskCode" label="任务编号" width="100"></el-table-column>
          <el-table-column prop="taskName" label="任务名称" width="130"></el-table-column>
          <el-table-column prop="taskType" label="任务类型" width="60"></el-table-column>
          <el-table-column prop="stationName" label="充电站名称" width="90"></el-table-column>
          <el-table-column prop="planStartTime" label="计划开始时间" width="115"></el-table-column>
          <el-table-column prop="planEndTime" label="计划结束时间" width="115"></el-table-column>
          <el-table-column prop="actualStartTime" label="实际开始时间" width="100"></el-table-column>
          <el-table-column prop="actualEndTime" label="实际结束时间" width="100"></el-table-column>
          <el-table-column prop="taskStatus" label="任务状态" width="80" :formatter="formatStatus"></el-table-column>
          <el-table-column fixed="right" label="操作" width="230">
            <template slot-scope="scope">
              <el-button @click="viewTask(scope.row)" type="text" size="small">查看</el-button>
              <el-button @click="editTask(scope.row)" type="text" size="small">编辑</el-button>
              <el-button @click="submitTask(scope.row)" type="text" size="small">提交</el-button>
              <el-button @click="handleTask(scope.row)" type="text" size="small">处理</el-button>
              <el-button @click="returnTask(scope.row)" type="text" size="small">退回</el-button>
              <el-button @click="deleteTask(scope.row)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchKey: '',
      taskList: [
        {
          index: 1,
          taskCode: 'ZGSB202000001',
          taskName: 'XX充电枪漏电抢修任务1',
          taskType: '抢修任务',
          stationName: '知更鸟充电站1',
          planStartTime: '2023-11-12 08:30:00',
          planEndTime: '2023-11-13 08:30:00',
          actualStartTime: '',
          actualEndTime: '',
          taskStatus: '待处理'
        },
        // 此处可继续添加更多模拟数据
      ]
    };
  },
  methods: {
    handleSelectionChange() {},
    formatStatus(row, column) {
      if (row.taskStatus === '待处理') {
        return <span style="color: orange;">{row.taskStatus}</span>;
      } else if (row.taskStatus === '在线') {
        return <span style="color: green;">{row.taskStatus}</span>;
      }
      return row.taskStatus;
    },
    viewTask(row) {
      console.log('查看任务详情', row);
      this.$router.push('/hostDisplayDetail')
    },
    editTask(row) {
      console.log('编辑任务', row);
    },
    submitTask(row) {
      console.log('提交任务', row);
    },
    handleTask(row) {
      console.log('处理任务', row);
    },
    returnTask(row) {
      console.log('退回任务', row);
    },
    deleteTask(row) {
      console.log('删除任务', row);
    },
    addTask(row) {
      console.log('新增任务', row);
      this.$router.push('/hostDisplayAdd')
    }
  }
};
</script>

<style scoped>
.title {
  font-size: 20px;
  font-weight: bold;
}
/* 设置表格内文字自动换行 */
.el-table {
  white-space: nowrap; /* 取消自动换行 */
  font-size: 10px; /* 把表格内字体改小，可根据实际情况调整 */
}
div {
  background-color: rgb(255, 255, 255);
}
</style>